<template>
  <div>
    <Card shadow>
      <Table :columns="columns" :data="tableData">
        <template slot-scope="{ row }" slot="status">
          <div class="statusBox">
            <template v-if="row.status == 1">
              <span class="failStatusIcon mr15"></span>
              <span>成功</span>
            </template>
            <template v-if="row.status == 2">
              <span class="successStatusIcon mr15"></span>
              <span>失败</span>
            </template>
            <template v-if="row.status == 3">
              <span class="statusThree mr15"></span>
              <span>导出中</span>
            </template>
            <!-- <span
              :class="row.status == 1 ? 'failStatusIcon' : 'successStatusIcon'"
            ></span>
            <span style="margin-left:10px">{{
              row.status == 1 ? "成功" : "失败"
            }}</span> -->
          </div>
        </template>
      </Table>
      <div class="page-foot">
        <Page :total="total" show-total transfer @on-change="changePage"></Page>
      </div>
    </Card>
  </div>
</template>

<script>
  import { exportLogList } from "../../../../api/setting.js";
  export default {
    data() {
      return {
        params: {
          page: 1,
          pageSize: 10,
        },
        total: 0,
        columns: [
          {
            title: "记录ID",
            key: "id",
            minWidth: 80,
          },
          {
            title: "操作人",
            key: "handle",
            minWidth: 100,
          },
          {
            title: "开始时间",
            key: "handle_start_time",
            minWidth: 150,
          },
          {
            title: "结束时间",
            key: "handle_end_time",
            minWidth: 150,
          },
          {
            title: "状态",
            // key: "status",
            slot: "status",
            minWidth: 100,
          },
          {
            title: "模块",
            key: "module_name",
            minWidth: 100,
          },
          {
            title: "已处理记录",
            key: "success_num",
            minWidth: 100,
          },
          // {
          //   title: "已失败记录",
          //   key: "failed_num",
          //   minWidth: 100,
          // },
          {
            title: "操作",
            key: "down_link",
            fixed: "right",
            minWidth: 100,
            render(h, data) {
              if (data.row.status == "1") {
                return h(
                  "a",
                  {
                    attrs: {
                      href: data.row.down_link,
                      download: "xlsx",
                    },
                  },
                  "下载"
                );
              } else {
                return "";
              }
            },
          },
        ],
        tableData: [],
      };
    },
    created() {
      this._exportLogList(this.params);
    },
    methods: {
      //初始化数据
      _exportLogList(params) {
        exportLogList(params).then((res) => {
          this.total = res.total;
          this.tableData = res.list;
        });
      },
      //切换页码
      changePage(page) {
        this.params.page = page;
        this._exportLogList(this.params);
      },
    },
  };
</script>

<style scoped lang="less">
  .mr15 {
    margin-right: 10px;
  }

  .page-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
  }

  .statusBox {
    display: flex;
    align-items: center;
  }

  .successStatusIcon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background-color: #ed4014;
  }

  .failStatusIcon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background-color: #19be6b;
  }

  .statusThree {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background-color: #fa8c16
  }
</style>